<template>
	<view>
		<form @submit="setUserinfo">
			<view v-if="!is_shouquan" style="display: flex;flex-direction: column;align-items: center;">
				<view  @click="openShouquan" style="margin: 50rpx 30rpx;">
					<view style="background-color: #e6e6e6;padding: 15rpx 30rpx;border-radius: 15rpx;">
					<image class="avatar" :src="avatarUrl||'/static/user.png'"></image>
					</view>
				</view>
				
				<view  @click="openShouquan" style="margin: 50rpx 50rpx;width: 80%;">
					<input class="uni-input" name="nickname" :disabled="true" placeholder="请填写用户昵称"
						:value="nickname"></input>
				</view>
			</view>
			
			<view v-if="is_shouquan" style="display: flex;flex-direction: column;align-items: center;">
				<view style="margin: 50rpx 30rpx;">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="avatarUrl||'/static/user.png'"></image>
					</button>
				</view>
				
				<view style="margin: 50rpx 50rpx;width: 80%;">
					<input class="uni-input" name="nickname" focus placeholder="请填写用户昵称" type="nickname"
						v-model="nickname"></input>
				</view>
			</view>
			

			<view style="width: 350rpx;margin-left: 200rpx;">
				<button type="primary" form-type="submit">修改用户信息</button>
			</view>
			
			<u-popup :show="show" @close="show = false" mode="bottom" :closeable="true" round="20">
				<view class="wl-contetn">
					<!-- <u--image shape="circle" :showLoading="true" src="https://pro-putyoga.oss-cn-qingdao.aliyuncs.com/2023/static/logo.png" width="150rpx" height="150rpx"></u--image> -->
					<view class="wc-step0">
						
						<view class="wl-title">授权获取用户头像与昵称</view>
						<view class="wl-xieyi">
							授权即同意
							<span @click="goxieyi">《用户协议》</span>
							与
							<span @click="goxieyi">《隐私协议》</span>
						</view>
						<view class="wl-wxlogin" @click="shouquan">
							授权
						</view>
					</view>
					</view>
					
			</u-popup>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_shouquan:false,
				nickname: "",
				avatarUrl: "",
				show:false,
			}
		},
		async onShow() {
			this.is_shouquan = uni.getStorageSync('is_shouquan') || false
			let userinfo = vk.vuex.get('$user.userInfo')
			if (userinfo.nickname) {
				this.nickname = userinfo.nickname;
				this.avatarUrl = userinfo.avatar;
			}
		},
		methods: {
			goxieyi(){
				uni.navigateTo({
					url:'/pages/my/agreement/agreement'
				})
			},
			shouquan(){
				uni.showToast({
					icon:"success",
					title:'授权成功!'
				})
				// this.is_shouquan = true
				this.is_shouquan = true
				uni.setStorageSync('is_shouquan',true)
				this.show = false
			},
			openShouquan(){
				this.show = true
			},
			onChooseAvatar(e) {
				var that = this;
				const { avatarUrl } = e.detail
				let avatarPath = vk.pubfn.createOrderNo("tx", 25);

				// callback方式，与promise方式二选一即可
				uniCloud.uploadFile({
					filePath: avatarUrl,
					cloudPath: avatarPath + '.jpg',
					onUploadProgress: function(progressEvent) {
						console.log(progressEvent);
						var percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					},
					success(res) {
						console.log("res=", res);
						that.avatarUrl = res.fileID
					}
				});
			},

			setUserinfo(e) {
				console.log("nickname=", e.detail.value.nickname);
				vk.userCenter.updateUser({
					data: {
						nickname: e.detail.value.nickname,
						avatar: this.avatarUrl
					},
					success: (data) => {
						// 成功后的逻辑
						vk.toast('修改成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 1000)
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.bindtext {
		background-color: #808080;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.bindtext1 {
		margin-left: 10rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.avatar-wrapper {
		background-color: #e6e6e6;padding: 15rpx 30rpx;border-radius: 15rpx;
		background-color: #e6e6e6;
	}

	.avatar {
		border: 0;
		margin-top: 20rpx;
		border-radius: 50%;
		width: 220rpx;
		height: 220rpx;
	}

	.uni-input {
		align-self: center;
		padding-left: 30rpx;
		height: 100rpx;
		border-radius: 5rpx;
		background-color: #e6e6e6;
	}
	
	.wc-step0,.wc-step1{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.wc-top{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	
	.wl-title{
		font-size: 36rpx;
		margin: 30rpx 0 25rpx 0;
	}
	
	.wl-xieyi{
		font-size: 26rpx;
		color: #9d9d9d;
		span{
			color: #333;
		}
	}
	
	.wl-wxlogin{
		width: 535rpx;
		height: 85rpx;
		background-color: #2b9939;
		color:white;
		text-align: center;
		line-height: 85rpx;
		font-size: 32rpx;
		margin-top: 50rpx;
		border-radius: 45rpx;
		margin-bottom: 50rpx;
	}
	
	.wc-step1 .wl-wxlogin{
		background-color: #d18f1c;
	}
</style>
